<script setup lang="ts">
import { ref } from 'vue'
import { useMessageStore } from '@/stores/modules/message';
import { alertGradeOptions } from '@/common/common';
import { hasOneOfPermissions } from '@/utils/check-auth';
const hasPermission = hasOneOfPermissions(['ALERT_VIEW_DETAILS']);
const messageStore = useMessageStore();
const dropdownRef = ref();
const viewDetails = (id: number) => {

    window.location.href = `http://${location.host}/#/warning/warning_detail?id=${id}`

}

const viewAll = () => {
    dropdownRef.value.handleClose()
    window.location.href = `http://${location.host}/#/warning/index`
}
</script>

<template>
    <el-dropdown ref="dropdownRef" class="message-container" trigger="click">
        <div class="message-wrapper cursor-pointer fs14">
            <el-badge v-if="messageStore.totalCount > 0" :value="messageStore.totalCount" :max="99" class="msg-badge">
                <svg-icon icon="icon-message" />
            </el-badge>
            <svg-icon v-else icon="icon-message" />
            <span class="fs14">通知</span>
        </div>

        <template #dropdown>
            <div class="message-dropdown">
                <div class="message-dropdown-header fs14">
                    消息（{{ messageStore.totalCount }}条未读）
                    <el-button v-if="messageStore.totalCount" link type="primary"
                        @click="messageStore.updateAllMessageReadAction">
                        全部已读
                    </el-button>
                </div>
                <div class="message-dropdown-body">
                    <el-scrollbar>
                        <template v-if="messageStore.unreadMessageList.length > 0">
                            <div v-for="msg in messageStore.unreadMessageList" :key="msg.id"
                                :class="['message-item', { clickable: hasPermission }]"
                                @click="viewDetails(msg.alertMessageId)">
                                <div class="message-content">
                                    <div class="message-text">{{ msg.alertContent }}</div>
                                    <div class="message-time">{{ msg.alertTime }}</div>
                                </div>
                                <div class="message-state">
                                    <el-tag round :type="alertGradeOptions[msg.alertGrade]?.tagType">
                                        {{ alertGradeOptions[msg.alertGrade]?.name }}
                                    </el-tag>
                                </div>
                            </div>
                        </template>
                        <div v-else class="message-empty">暂无新消息</div>
                    </el-scrollbar>
                </div>
                <div class="message-dropdown-footer">
                    <el-button v-auth="'ALERT_LIST'" link type="primary" @click="viewAll">
                        查看全部告警
                    </el-button>
                </div>
            </div>
        </template>
    </el-dropdown>
</template>

<style lang="scss" scoped>
.message-container {
    .message-wrapper {
        color: var(--theme-header-text-color);

        .msg-badge {
            --el-badge-size: 14px;

            :deep(.el-badge__content) {
                top: 12px;
                right: calc(10px + var(--el-badge-size) / 2);
            }
        }
    }
}

.message-dropdown {
    width: 320px;
    font-size: 14px;
    text-align: center;

    &-header {
        padding: 0 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        border-bottom: 1px solid var(--theme-border-color-light);
    }

    &-body {
        height: 180px;
        border-bottom: 1px solid var(--theme-border-color-light);

        :deep(.el-scrollbar__view) {
            padding: 8px 0;
        }

        .message-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 22px;

            &.clickable {
                &:hover {
                    cursor: pointer;
                    background-color: var(--el-fill-color-light);
                }
            }

            .message-content {
                text-align: left;
                color: #FFFFFF;

                .message-time {
                    font-size: 12px;
                    color: var(--theme-text-color-info);
                }
            }
        }

        .message-empty {
            color: var(--theme-text-color-info);
            margin-top: 50px;
        }
    }

    &-footer {
        padding: 0 22px;
        height: 38px;
        line-height: 38px;
    }

    button {
        font-size: 12px;
        display: inline-block;
    }
}
</style>
